<template>
  <a-modal   v-model:open="props.visible" width="1200px" @ok="onOk" @cancel="onOk">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="电键" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.docEntry" placeholder="电键" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="onSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <a-card  :bordered="false" >
      <a-table

        :dataSource="data.tableList"
        :columns="columns"
        rowKey="docEntry"
        :loading="tableLoading"
        :pagination="false"
        :row-selection="{ selectedRowKeys: data.selectDocEntrys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'docEntry'"></template>
        </template>
      </a-table>
      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.pageSize"
          v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize"
          :total="total"
          @change="queryData"
          @showSizeChange="queryData"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </a-card>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { machineApi } from '/@/api/business/erp/machine-api';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { useRouter } from 'vue-router';

  const props = defineProps({
    value: Number,
    visible: {
      type: Boolean,
      default: false,
    },
    onClose: {
      type: Function,
    },
  });

  // ---------------------------- 表格列 ----------------------------
  const router = useRouter();
  const columns = ref([
    {
      title: '编码',
      dataIndex: 'docEntry',
      align: 'center',
    },
    {
      title: '对象编码',
      dataIndex: 'objId',
      align: 'center',
    },
    {
      title: '对象名',
      dataIndex: 'objName',
      align: 'center',
    },
    {
      title: '单据状态',
      dataIndex: 'docStatus',
      align: 'center',
    },
    {
      title: '审核',
      dataIndex: 'approved',
      align: 'center',
    },

    {
      title: '设备名称',
      dataIndex: 'macName',
      align: 'center',
    },
    {
      title: '设备位置',
      dataIndex: 'macAddress',
      align: 'center',
    },
  ]);

  // ---------------------------- 查询数据表单和方法 ----------------------------

  const queryFormState = {
    docEntry: undefined, //电键
    pageNum: 1,
    pageSize: 10,
  };
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 表格加载loading
  const tableLoading = ref(false);
  // 表格数据
  const tableData = ref(false);
  // 总数
  const total = ref(0);

  const data = reactive({
    selectDocEntrys: [],
    list:[],
    tableList:[]
  });

  function onSelectChange(selectedRowKeys) {
    data.selectDocEntrys =   selectedRowKeys
    data.list =  data.tableList.filter(item => selectedRowKeys.includes(item.docEntry))

  }

  function onOk() {
    props.onClose(data.list);
  }

  // 重置查询条件
  function resetQuery() {
    let pageSize = queryForm.pageSize;
    Object.assign(queryForm, queryFormState);
    queryForm.pageSize = pageSize;
    queryData();
  }

  // 搜索
  function onSearch() {
    queryForm.pageNum = 1;
    queryData();
  }

  // 查询数据
  async function queryData() {
    tableLoading.value = true;
    try {
      let queryResult = await machineApi.queryPage(queryForm);
      data.tableList = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(queryData);
</script>
